<template>
    <div class="chaos-login-middle">
        <el-divider><span style="font-size:38px;">登陆</span></el-divider>
        <div style="width:400px;height:350px;margin:80px auto">
            <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="100px">
                <el-form-item label="账号" prop="account">
                    <el-input v-model="loginForm.account"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password" >
                    <el-input v-model="loginForm.password" type="password"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-checkbox v-model="rememberMe"></el-checkbox>
                    <span style="margin-left:5px;color:#000000">记住我</span>
                    <a href="" style="color:#00A1D6;margin-left:80px;">无法验证</a>
                    <a href="" style="color:#00A1D6;margin-left:15px;">找回密码</a>
                </el-form-item>

                <el-form-item>
                    <el-row>
                        <el-col :span="12"><el-button type="primary" style="width:100%" @click="doLogin" :loading="loginLoading">登陆</el-button></el-col>
                        <el-col :span="12"><el-button plain style="float:right;width:calc(100% - 10px)" @click="doRegister">注册</el-button></el-col>
                    </el-row>
                </el-form-item>

                <el-form-item>
                    <span style="margin-left:5px;color:#000000">登录即代表你同意</span>
                    <a href="" style="color:#00A1D6">用户协议</a>
                    <span style="margin-left:5px;margin-right:5px;color:#000000">和</span>
                    <a href="" style="color:#00A1D6">隐私政策</a>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'chaosLoginMiddle',

        data () {
            //这个校验用于模拟后台账号密码验证错误的时候显示的错误信息。
            //这个校验永远不会通过，只会显示错误信息
            var accountOrPassWordExist = (rule, value, callback) => {
                var self = this;
                if(!self.accountError){
                    //如果这个标志位为false,直接返回callback();表示这条校验规则不执行
                    return callback();
                }

                //如果上面的accountError标志位为true,表示账号或者密码错误，执行校验account的逻辑
                if(rule.field === "account"){
                    return callback(new Error(' '));
                }

                //如果上面的accountError标志位为true,表示账号或者密码错误，执行校验password的逻辑
                if(rule.field === "password"){
                    return callback(new Error('账号或密码错误'));
                }
            };
            return {
                loginForm:{
                    account:"",
                    password:"",
                    age:17
                },
                rememberMe:false,
                loginLoading:false,
                accountError:false,//账号或者密码错误的标志位
                //校验规则
                loginRules:{
                    account: [
                        { required: true, message: '请输入账号', trigger: 'blur'},
                        { min: 6, max: 16, message: '账号的长度在 6 到 16 个字符', trigger: 'blur' },
                        { validator: accountOrPassWordExist, trigger: 'manual' }
                    ],
                    password: [
                        { required: true,message: "请输入密码", trigger: 'blur' },
                        { min: 6, max: 12, message: '密码的长度在 6 到 12 个字符', trigger: 'blur' },
                        { validator: accountOrPassWordExist, trigger: 'manual' }
                    ]
                }
            }
        },
        watch:{
            'loginForm.account'(newValue,oldValue){
                var self = this;
                if(self.accountError){
                    self.accountError = false;
                    self.$refs['loginForm'].validateField(['account','password']);
                }
            },
            'loginForm.password'(newValue,oldValue){
                var self = this;
                if(self.accountError){
                    self.accountError = false;
                    self.$refs['loginForm'].validateField(['account','password']);
                }
            }
        },
        methods:{
            doLogin(){
                var self = this;
                var validResult = false;
                //清除账号密码异常标志位的信息
                //通过这个标志位来判断是否是账号或者密码错误导致的异常
                self.accountError = false;

                self.$refs['loginForm'].validate((valid) => {
                    if (valid) {
                        validResult = true;
                        return;
                    } else {
                        validResult = false;
                        return;
                    }
                });
                //
                if(validResult){
                    //校验通过后提交数据到后台数据库
                    self.loginLoading = true;
                    self.$api.post('loginController/login', self.loginForm, result => {
                        //添加登陆按钮的loading事件
                        self.loginLoading = false;
                        //校验账号密码成功
                        if(result.chaosCode=="10000"){
                            self.accountError = false;
                            //跳转到首页
                            this.$router.push({path:'/home'});
                        }

                        //登陆失败的逻辑！
                        if(result.chaosCode=="00000"){
                            self.accountError = true;
                            self.$refs['loginForm'].validateField(['account','password']);
                        }
                    },
                        failure=>{
                        // alert(failure.errors[0].defaultMessage);
                        // debugger;
                    });
                }



                // self.$api.post('loginController/login', self.loginForm, r => {
                //     //添加登陆按钮的loading事件
                //     self.loginLoading = false;
                //     //注册成功，执行跳转逻辑!
                //     console.log(r)
                // })
            },
            doRegister(){
                //跳转到注册页面
                this.$router.push({path:'/registry'});
            }
        }

    }
</script>

<style scoped>
    .chaos-login-middle{
        width:999px;
        min-height:450px;
        margin:auto auto;
    }

</style>
